<div class="w-full max-w-xs mx-auto mt-2">
  <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" (submit)="onSubmit($event)">
    <h3 class="text-3xl font-bold text-center text-teal-700 mb-4">注册账号</h3>
    <div class="mb-4">
      <div class="block text-gray-700 text-sm font-bold mb-2">
        <label for="email">
          邮箱
        </label>
        <span class="ml-1 text-red-500">*</span>
      </div>
      <input
        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
        id="email" name="email" type="text" [(ngModel)]="email" placeholder="邮箱" />
    </div>
    <div class="mb-4">
      <div class="block text-gray-700 text-sm font-bold mb-2">
        <label for="username">
          用户名
        </label>
        <span class="ml-1 text-gray-500 font-normal">为空时, 取Email中的名字</span>
      </div>
      <input
        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
        id="username" name="username" type="text" [(ngModel)]="name" placeholder="用户名" />
    </div>
    <div class="mb-4">
      <div class="block text-gray-700 text-sm font-bold mb-2">
        <label for="password">
          密码
        </label>
        <span class="ml-1 text-red-500">*</span>
      </div>
      <input
        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
        id="password" name="password" type="password" [(ngModel)]="password" placeholder="密码" />
    </div>
    <div class="mb-4">
      <div class="block text-gray-700 text-sm font-bold mb-2">
        <label for="confirmPw">
          确认密码
        </label>
        <span class="ml-1 text-red-500">*</span>
      </div>
      <input
        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
        id="confirmPw" name="confirmPw" type="password" [(ngModel)]="confirmPw" placeholder="确认密码" />
    </div>
    <div class="mb-4">
      <div class="block text-gray-700 text-sm font-bold mb-2">
        <label for="avatar">
          头像
        </label>
        <span class="ml-1 text-red-500">*</span>
      </div>
      <input
        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
        id="avatar" name="avatar" type="file" (change)="onFileChange($event.target)" placeholder="选择头像" />
    </div>
    <div class="flex items-center justify-between">
      <button class="btn btn-blue-500" type="submit">
        注册账号
      </button>
      <a [routerLink]="['/login']" class="text-teal-500">已有账号</a>
    </div>
  </form>
  <p class="text-center text-gray-500 text-xs">
    &copy;2019 Acme Corp. All rights reserved.
  </p>
</div>